<template>
  <div>
    <div class="current">
      <el-button type="success" size="medium"  @click="insertAffice()">添加公告信息</el-button>
    </div>

    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="公告名称">
        <el-input v-model="afficelikeFrom.afficheTitle" placeholder="公告名称" />
      </el-form-item>
      <el-form-item label="公告时间">
        <el-date-picker
          v-model="afficelikeFrom.afficheCreateTime"
          type="datetime"
          placeholder="选择发布时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getafficheList()"
      >查询</el-button
      >
      <el-button type="default" @click="resetData1()">清空</el-button>
    </el-form>

    <el-table
      :data="afficheList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      border
      style="align-content: center"
    >
        <el-table-column type="index" align="center" label="编号" width="150px">
       <!-- <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>-->
      </el-table-column>
      <el-table-column prop="afficheTitle" label="公告标题" width="150px" ></el-table-column>
      <el-table-column prop="afficheText" label="公告内容" width="150px" ></el-table-column>
      <el-table-column property="afficheImg" header-align="center" alizgn="center" width="150px" label="公告图片">
        <template slot-scope="scope">
          <el-popover placement="right" title trigger="hover">
            <!-- 放大版 -->
            <img :src="scope.row.afficheImg" style="height: 400px; width: 600px" ailgn="center"/>
            <!-- 正常版 -->
            <img slot="reference" :src="scope.row.afficheImg" style="max-height: 50px; max-width: 130px"/>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="afficheCreateTime" label="公告时间" width="100"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <!-- <el-button @click="gradetails(scope.row)" type="primary" size="mini">查看图片信息详情</el-button>-->
          <el-button
            @click="gradupdastatusOk(scope.row)"
            type="danger"
            size="mini"
          >删除公告信息</el-button
          >
          <el-button
            @click="gradupdastatusNo(scope.row)"
            type="warning"
            size="mini"
          >修改公告信息</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 前端分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10]"
      :page-size="pageSize"
      :total="afficheList.length"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 添加和修改章节表单 -->
    <el-dialog :visible.sync="dialogAfficheFormVisible"  :close-on-click-modal ="false" title="添加公告信息">
      <el-form :model="addAfficelikeFrom" label-width="200px">
        <el-form-item label="公告标题">
          <el-input v-model="addAfficelikeFrom.afficheTitle" style="width:300px;" />
        </el-form-item>
        <el-form-item label="公告内容">
          <el-input v-model="addAfficelikeFrom.afficheText"  controls-position="right" style="width:300px;"/>
        </el-form-item>

        <el-form-item label = "上传公告图片">
          <el-upload class="upload-demo"
                     ref="file"
                     action="http://localhost:9090/detail/bgs/picture/handelPic"
                     :on-preview="handlePreview"
                     :on-remove="handleRemove"
                     :before-remove="beforeRemove"
                     :limit="5"
                     :on-exceed="handleExceed"
                     :on-success="getwendinfo"
                     list-type="picture-card"
                     :file-list="fileList"
                     :auto-upload="true">
            <img width="100%" v-if="addAfficelikeFrom.afficheImg" :src="addAfficelikeFrom.afficheImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>

          </el-upload>
        </el-form-item>


        <el-form-item label="公告时间">
          <el-date-picker
            v-model="afficelikeFrom.afficheCreateTime"
            type="datetime"
            placeholder="选择公告时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAfficheFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrInsert">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改公告表单 -->
    <el-dialog :visible.sync="dialogAfficheFormUpdate"  :close-on-click-modal ="false" title="修改公告信息">
      <el-form :model="updateAfficelikeFrom" label-width="200px">
        <el-form-item label="公告标题">
          <el-input v-model="updateAfficelikeFrom.afficheTitle" style="width:300px;" />
        </el-form-item>
        <el-form-item label="公告内容">
          <el-input v-model="updateAfficelikeFrom.afficheText"  controls-position="right" style="width:300px;"/>
        </el-form-item>

        <el-form-item label = "修改公告图片" >
          <el-upload  class="upload-demo"
                     ref="file"
                     action="http://localhost:9090/detail/bgs/picture/handelPic"
                     :on-preview="handlePreview"
                     :on-remove="handleRemove"
                     :before-remove="beforeRemove"
                     :on-exceed="handleExceed"
                     :on-success="getwendinfo"
                     list-type="picture-card"
                     :file-list="fileList"
                     :auto-upload="true">
            <img width="100%" v-if="afficheImg" :src="updateAfficelikeFrom.afficheImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>


        <el-form-item label="公告时间">
          <el-date-picker
            v-model="updateAfficelikeFrom.afficheCreateTime"
            type="datetime"
            placeholder="选择公告时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAfficheFormUpdate = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>


  </div>

</template>

<script>
  import API from "@/api/afficheCURD/affiche"
  import affiche from "@/api/afficheCURD/affiche";
  export default {
        name: "the-afficheCURD",
      data(){
          return{
            total: 100,
            pageSize: 3,
            currentPage: 1,
            fileList:[],//图片的集合
            afficheImg:'',
            afficheList:[],
            afficelikeFrom:{
              afficheTitle:'',
              afficheCreateTime:''
            },
            addAfficelikeFrom:{
              afficheTitle:'',
              afficheText:'',
              afficheImg:'',
              afficheCreateTime:''
            },
            dialogAfficheFormVisible:false,
            dialogAfficheFormUpdate:false,
            updateAfficelikeFrom:{
              afficheTitle:'',
              afficheText:'',
              afficheImg:'',
              afficheCreateTime:''
            },
          }
      },
    created() {
          this.getafficheList()
    },
    methods:{
          /*全查模糊查*/
      getafficheList(){
        API.getAfficheList(this.afficelikeFrom)
        .then(response=>{
          console.log(response)
          this.afficheList = response.data.list
        })
      },

      /*添加信息*/
      insertAffice(){
        this.dialogAfficheFormVisible = true
        this.addAfficelikeFrom = {}
      },
      saveOrInsert(){
      API.getAfficheInsert(this.addAfficelikeFrom)
        .then(response=>{
          this.$message({
            type: "success",
            message: "添加信息成功！！",
          });
          this.dialogAfficheFormVisible = false
          this.addAfficelikeFrom = {}
          this.getafficheList()
        })
      },
      gradupdastatusNo(row){
        console.log(row)
        this.dialogAfficheFormUpdate = true
        this.afficheImg=row
        this.updateAfficelikeFrom= row;
      },
      saveOrUpdate(){
        API.updateAfficheById(this.updateAfficelikeFrom)
        .then(response=>{
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.dialogAfficheFormUpdate = false
          this.updateAfficelikeFrom={}
          this.getafficheList()
        })
      },



      //删除公告信息
      gradupdastatusOk(row){
        this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          API.deleteAfficheById(row.afficheId)
            .then(response=>{
              //提示信息删除成功
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //回到列表 列表刷新
              this.getafficheList()
            })
        })
      },

      handleSizeChange(size) {
        this.pageSize = size;
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
      },
      resetData1(){
        this.afficelikeFrom={}
        this.getafficheList()
      },

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },

      handlePreview(file) {
        console.log(file);
      },

      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },

      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      getwendinfo(res) {

        this.addAfficelikeFrom.afficheImg=res;
        this.updateAfficelikeFrom.afficheImg=res
        console.log(this.addAfficelikeFrom.afficheImg);
      /*  console.log(res);
        this.a=res.data.pic.data.pic
        this.a.typeId = this.typeId
        this.a.otherId = this.otherId,

          uni.request({
            url: 'http://localhost:9090/wwf/xiyou-picture/addId',
            method: "POST",
            dataType: "JSON",
            data: this.a,
            success: (res) => {
              console.log(res);

            }
          });*/
        /* this.addparttimeJobFrom.picId=res.data.pic.data.pic.pictureId; */

      },


    }
  }
</script>

<style scoped>
  .current{

  }
</style>
